<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Getting Started | Vue Test Utils</title>
    <meta name="description" content="The documentation for the official Vue Test Utils">
    <link rel="stylesheet" href="static/css/style.fa57c02b.css">
    <link rel="modulepreload" href="https://test-utils.vuejs.org/assets/chunks/AlgoliaSearchBox.e05398bd.js">
    <link rel="modulepreload" href="https://test-utils.vuejs.org/assets/app.49122d47.js">
    <link rel="modulepreload" href="https://test-utils.vuejs.org/assets/guide_index.md.8d4d1000.lean.js">
    
    <link rel="icon" href="https://test-utils.vuejs.org/logo.png">
  <meta name="twitter:title" content="Getting Started | Vue Test Utils">
  <meta property="og:title" content="Getting Started | Vue Test Utils">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756=""><div class="sidebar-button" data-v-675d8756=""><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path></svg></div><a class="nav-bar-title" href="javascript:;" aria-label="Vue Test Utils, back to home" data-v-675d8756="" data-v-cc01ef16=""><!----> Vue Test Utils</a><div class="flex-grow" data-v-675d8756=""></div><div class="nav" data-v-675d8756=""><nav class="nav-links" data-v-675d8756="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">Migrating from Vue 2 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Changelog <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68=""><nav class="nav-links nav" data-v-83e92a68="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">Migrating from Vue 2 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Changelog <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68=""><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Installation</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">Essentials</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="javascript:;">Getting Started</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">What is Vue Test Utils?</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">What Next?</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">A Crash Course</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Conditional Rendering</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Testing Emitted Events</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Testing Forms</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Passing Data to Components</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Write components that are easy to test</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Vue Test Utils in depth</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Slots</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Asynchronous Behavior</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Making HTTP Requests</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Transitions</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Component Instance</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Reusability and Composition</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Testing Vuex</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Testing Vue Router</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Testing Teleport</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Stubs and Shallow Mount</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Extending Vue Test Utils</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Plugins</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Community and Learning</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Migrating from Vue 2</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">API Reference</a><!----></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4=""><div class="container" data-v-7eddb2c4=""><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4=""><div><h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h1><p>Welcome to Vue Test Utils, the official testing utility library for Vue.js!</p><p>This is the documentation for Vue Test Utils v2, which targets Vue 3.</p><p>In short:</p><ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue Test Utils 1</a> targets <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue 2</a>.</li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue Test Utils 2</a> targets <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue 3</a>.</li></ul><h2 id="what-is-vue-test-utils" tabindex="-1">What is Vue Test Utils? <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h2><p>Vue Test Utils (VTU) is a set of utility functions aimed to simplify testing Vue.js components. It provides some methods to mount and interact with Vue components in an isolated manner.</p><p>Let&#39;s see an example:</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> mount <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@vue/test-utils&#39;</span>

<span class="token comment">// The component to test</span>
<span class="token keyword">const</span> MessageComponent <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">&#39;&lt;p&gt;{{ msg }}&lt;/p&gt;&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;msg&#39;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&#39;displays message&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>MessageComponent<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">&#39;Hello world&#39;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token comment">// Assert the rendered text of the component</span>
  <span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">&#39;Hello world&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="what-next" tabindex="-1">What Next? <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h2><p>To see Vue Test Utils in action, <a href="a-crash-course.html">take the Crash Course</a>, where we build a simple Todo app using a test-first approach.</p><p>Docs are split into two main sections:</p><ul><li><strong>Essentials</strong>, to cover common use cases you&#39;ll face when testing Vue components.</li><li><strong>Vue Test Utils in Depth</strong>, to explore other advanced features of the library.</li></ul><p>You can also explore the full <a href="javascript:;">API</a>.</p><p>Alternatively, if you prefer to learn via video, there is <a href="javascript:;" target="_blank" rel="noopener noreferrer">a number of lectures available here</a>.</p></div></div><footer class="page-footer" data-v-7eddb2c4="" data-v-07c132fc=""><div class="edit" data-v-07c132fc=""><div class="edit-link" data-v-07c132fc="" data-v-1ed99556=""><a class="link" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-1ed99556="">Edit this page <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-07c132fc=""><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4="" data-v-38ede35f=""><div class="container" data-v-38ede35f=""><div class="prev" data-v-38ede35f=""><a class="link" href="javascript:;" data-v-38ede35f=""><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f=""><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f="">Installation</span></a></div><div class="next" data-v-38ede35f=""><a class="link" href="javascript:;" data-v-38ede35f=""><span class="text" data-v-38ede35f="">A Crash Course</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f=""><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_index.md\":\"7cb3f7ba\",\"guide_advanced_async-suspense.md\":\"92de39a3\",\"guide_advanced_component-instance.md\":\"2cbac3c7\",\"guide_advanced_http-requests.md\":\"f1cf08b6\",\"guide_advanced_reusability-composition.md\":\"92a6e71f\",\"guide_advanced_slots.md\":\"5fde3872\",\"guide_advanced_stubs-shallow-mount.md\":\"860a1344\",\"guide_advanced_teleport.md\":\"8f99d4c3\",\"guide_advanced_transitions.md\":\"1a2340e7\",\"guide_advanced_vue-router.md\":\"dcf553ad\",\"guide_advanced_vuex.md\":\"e7a8ea91\",\"guide_essentials_a-crash-course.md\":\"2a557e7a\",\"guide_essentials_conditional-rendering.md\":\"ffbbefb8\",\"guide_essentials_easy-to-test.md\":\"4ac41a8f\",\"guide_essentials_event-handling.md\":\"d5aae656\",\"guide_essentials_forms.md\":\"2dd1bff3\",\"guide_essentials_passing-data.md\":\"1d977e0a\",\"guide_extending-vtu_community-learning.md\":\"f15e2ee5\",\"guide_extending-vtu_plugins.md\":\"c9dae1ab\",\"guide_index.md\":\"8d4d1000\",\"index.md\":\"63a4989e\",\"installation_index.md\":\"75fe1f33\",\"migration_index.md\":\"3fe4b12c\"}")</script>
    <script type="module" async="" src="static/js/app.49122d47.js"></script>
    
  </body>
</html>